<template>
	<view class="return-goods">
		<view class="order-holder" v-for="item in orderList" :key="item.id">
			<view class="order-info">
				<text>订单编号{{item.orderId}}</text>
			</view>
			<view class="list">
				<view class="item">
					<image class="img" :src="item.productPic" mode=""></image>

					<view class="right">
						<view class="name">
							<text>{{item.productName}}</text>
							<text>￥{{item.productPrice}}</text>
						</view>

						<view class="count">
							<text>编号：{{item.productSkuId}}</text>
							<text>x{{item.productQuantity}}</text>
						</view>

						<view class="type">
							<text>规格：</text>
							<text v-for="item1 in JSON.parse(item.productAttr)">{{item1.key}}:{{item1.value}} </text>
						</view>
					</view>
				</view>
			</view>

			<view class="sum-price">
				<view class="sum">
					<text>时间：{{item.createTime}}</text>
					<text>合计：￥{{item.totalPrice}}元</text>
				</view>
			</view>
		</view>

		<view class="return-holder">
			<view class="list">
				<view class="item">
					<text>请选择退单数量</text>
					<view class="input">
						<input type="text" v-model="returnInfo.count" />
					</view>
				</view>
				<view class="item">
					<text>请输入退单原因</text>
					<view class="input">
						<input type="text" v-model="returnInfo.reason" placeholder="请输入退单原因" />
					</view>
				</view>
				<view class="item">
					<text>请选择退单地址</text>
					<view class="input" v-if="addressList.length>0">
						<picker mode="selector" @change="bindChange" class="picker" range-key="addressName" :range="addressList" :value="chooseIndex">
							<view class="picker-item">{{addressList[chooseIndex].addressName}}</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<text>请输入问题描述</text>
					<view class="input">
						<textarea type="text" v-model="returnInfo.description" placeholder="请输入问题描述" />
						</view>
				</view>
				
				<view class="img-upload">
					<view class="title">
						温馨提醒:
					</view>
					<view class="text">
						上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
					</view>
					
					<view class="img-holder">
						<view class="upload-btn" @tap="chooseImg">
							<image src="/static/icons/jia.png" mode=""></image>
							<view>
								上传图片
							</view>
						</view>
						<view class="img-box" v-for="(item,index) in imgList">
							<image class="img" :src="item" mode=""></image>
							<image class="close" src="/static/icons/shanchus2.png" mode="" @tap="deleteImg(index)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @tap="submitReturn">
			提交
		</view>
	</view>
</template>

<script>
	import {
		requestOrderInfo,
		requestOrderReturnApply,
		requestCompanyAddrss
	} from 'api/user/order.js';

	export default {
		data() {
			return {
				orderId: '',
				skuId: '',
				// 地址选择的下标
				chooseIndex: 0,
				// 商品信息，写成数组是为了异步渲染数据不报错
				orderList: [],
				// 地址列表
				addressList: [],
				// 上传的退单信息
				returnInfo: {
					"companyAddressId": "",
					"count": 0,
					"description": "",
					"orderId": "",
					"orderItemId": "",
					"proofPics": "",
					"reason": ""
				},
				// 图片列表
				imgList:[],
			};
		},
		methods: {
			// 获取商品信息
			getOrderInfo() {
				requestOrderInfo(this.returnInfo.orderId).then(res => {
					this.orderList = res.data.orderItems.filter(val => {
						return val.productSkuId === this.skuId;
					})
					this.returnInfo.count = this.orderList[0].productQuantity;
					this.returnInfo.orderItemId = this.orderList[0].id;
					console.log(this.orderList);
				})
			},
			// 获取地址列表
			getCompanyAddressList() {
				requestCompanyAddrss().then(res => {
					// console.log(res);
					this.addressList = res.data.items;
					this.returnInfo.companyAddressId = this.addressList[this.chooseIndex].id;
				})
			},
			// picker选择器选择
			bindChange(e) {
				this.chooseIndex = e.detail.value;
				this.returnInfo.companyAddressId = this.addressList[this.chooseIndex].id;
				// console.log(this.returnInfo.companyAddressId)
			},
			// 上传图片
			chooseImg() {
				const _this = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						 // console.log(tempFilePaths);
						 
						 if(tempFilePaths.length>3-_this.imgList.length){
							 uni.showToast({
							 	title:'图片超过三张，上传失败',
								icon:'none',
								duration:2000,
							 })
						 }else{
							 tempFilePaths.forEach(val=>{
								 _this.uploadImg(val,_this);
							 })
						 }
					},
					error: function(e) {
						console.log(e);
					}
				})
			},
			// 发送图片到服务器
			uploadImg(files,_this){
				uni.uploadFile({
					url: 'https://leju.bufan.cloud/lejuClient/orderReturn/uploadImg',
					filePath: files,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success(uploadFileRes){
						uni.showToast({
							title:"上传成功",
							icon:'success',
							duration:1000
						})
						let res = JSON.parse(uploadFileRes.data)
						console.log(res);
						_this.imgList.push(res.data.fileUrl)
						// _this.user.icon = res.data.fileUrl;
					},
					fail(res){
						uni.showToast({
							title:res.message,
							icon:'none',
							duration:1000
						})
					}
				});
			},
			// 删除图片
			deleteImg(index){
				this.imgList.splice(index,1);
				uni.showToast({
					title:"删除成功",
					icon:'success',
					duration:1000
				})
			},
			// 提交退货
			submitReturn(){
				
				if(this.returnInfo.count>0&&this.returnInfo.count<=this.orderList[0].productQuantity){
					this.returnInfo.proofPics = this.imgList.join(',');
					console.log(this.returnInfo);
					requestOrderReturnApply(this.returnInfo).then(res=>{
						console.log(res);
						if(res.code===20000){
							uni.showToast({
								title:"退单成功，1s后返回",
								icon:'success',
								duration:2000
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1,
								})
							},1000)
						}else{
							uni.showToast({
								title:res.message,
								icon:'none',
								duration:1000
							})
						}
					})
				}else{
					uni.showToast({
						title:"退单失败，请输入正确的数量",
						icon:'none',
						duration:2000
					})
				}
				
			}
		},
		onLoad(e) {
			this.returnInfo.orderId = e.id;
			this.skuId = e.skuId;
			this.getOrderInfo();
			this.getCompanyAddressList();
		}
	}
</script>

<style lang="scss" scoped>
	.return-goods {
		box-sizing: border-box;
		padding: 40rpx;
		width: 100%;

		.order-holder {
			box-sizing: border-box;
			margin: 30rpx 0;
			padding: 36rpx;
			border-radius: 24rpx;
			background-color: #fff;
			overflow: hidden;

			.order-info {
				display: flex;
				padding-bottom: 20rpx;
				justify-content: space-between;
				font-size: 24rpx;
				border-bottom: 1px solid #f1ece7;

				.red {
					color: #f00;
				}
			}

			.list {
				.item {
					box-sizing: border-box;
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					width: 100%;
					border-bottom: 1px solid #f1ece7;

					.img {
						width: 162rpx;
						height: 162rpx;
					}

					.right {
						margin-left: 30rpx;
						flex: 1;

						.name {
							font-size: 13px;
							line-height: 37px;
							display: flex;
							justify-content: space-between;
						}

						.count {
							display: flex;
							justify-content: space-between;
							font-size: 22rpx;
							color: #8d8d8d;
							line-height: 30rpx;
							margin-top: 4rpx;
						}
					}
				}
			}

			.sum-price {
				float: right;
				width: 100%;
				margin-top: 20rpx;

				.sum {
					display: flex;
					justify-content: space-between;
				}

				.submit-btn {
					margin-left: 32rpx;
					margin-top: 20rpx;
					float: right;
					width: 124rpx;
					height: 50rpx;
					font-size: 26rpx;
					border: 2rpx solid #2d4f43;
					text-align: center;
					color: #2d4f43;
					border-radius: 10rpx;
					line-height: 50rpx;
				}
			}
		}

		.return-holder {
			box-sizing: border-box;
			margin: 30rpx 0;
			padding: 36rpx;
			background-color: #fff;
			overflow: hidden;

			.list {
				width: 100%;

				.item {
					display: flex;
					font-size: 24rpx;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #f1ece7;
					text{
						width: 200rpx;
					}
					
					.input {
						margin-left: 100rpx;
						flex: 1;
						text-align: right;
					}
					
					textarea{
						text-align: left;
						width: 300rpx;
					}
				}
				
				.img-upload{
					padding: 30rpx 0;
					font-size: 24rpx;
					.title{
						color: #333333;
						font-weight: 600;
					}
					
					.text{
						
					}
					
					.img-holder{
						margin-top: 50rpx;
						display: flex;
						width: 100%;
						
						.upload-btn{
							display: flex;
							flex-shrink: 0;
							justify-content: center;
							align-items: center;
							flex-wrap: wrap;
							width: 120rpx;
							height: 120rpx;
							font-size: 24rpx;
							image{
								width: 80rpx;
								height: 80rpx;
							}
						}
						
						.img-box{
							margin-left: 32rpx;
							position: relative;
							.img{
								width: 120rpx;
								height: 120rpx;
							}
							
							.close{
								position: absolute;
								top: -10rpx;
								right: -10rpx;
								width: 34rpx;
								height: 34rpx;
							}
						}
					}
				}
			}
		}
		
		.submit-btn{
			margin: 120rpx auto;
			width: 540rpx;
			height: 100rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 95rpx;
			background: #354e44;
			color: #fff;
			border-radius: 28rpx;
		}
	}
</style>
